<template>
    <div id="userManage">
        <div class="userManage-content">
            <el-button class="createBrief" @click="dialogVisible=true;dtitle='新增联系人'">新增联系人</el-button>
            <div class="tableBox">
                <el-table :data="tableData" border class="sentimentTable" style="width: 100%">
                    <el-table-column type="selection" width="55"/>
                    <el-table-column prop="name" label="姓名"/>
                    <el-table-column prop="email" label="邮箱"/>
                    <el-table-column prop="mobile"  label="手机号"/>
                    <el-table-column prop="remark" label="备注"/>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <span class="tableBtn edit" @click="bianji(scope.row)">编辑</span>
                            <span class="tableBtn delete" @click="shanchu(scope.row)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSize"
                    :page-size="page.size"
                    layout="prev, pager, next"
                    :total="page.total"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog :title="dtitle"  :visible.sync="dialogVisible" width="640px">
            <el-form :model="userForm" :rules="rules" ref="form" label-width="100px" style="margin-right: 100px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="userForm.name"></el-input>
                </el-form-item>
                <el-form-item prop="email" label="邮箱">
                    <el-input v-model="userForm.email"></el-input>
                </el-form-item>
                <el-form-item prop="mobile" label="手机号">
                    <el-input v-model="userForm.mobile"></el-input>
                </el-form-item>
                <el-form-item prop="remark" label="备注">
                    <el-input v-model="userForm.remark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer"  >
                <el-button type="primary" @click="submitForm">确定</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import '../../assets/css/userManage.css'
import {
    opinionContactsList,
    opinionContactsAdd,
    opinionContactsDel,
    opinionContactsEdit
} from '@/admin/api.js'
export default {
    data(){
        return{
            dtitle: '',
            tableData: [],
            page: {
                filterText: "",
                currentPage: 1,
                pageSize: [10, 20, 30, 50, 100],
                size: 10,
                total: 100
            },
            dialogVisible: false,
            userForm: {
                name: '',
                email: '',
                mobile: '',
                remark: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                mobile:[
                    { required: true, message: '手机号码不能为空', trigger: 'blur'}
                ]
            }
        }
    },
    mounted () {
        this.gettabledata()
    },
    watch: {
        dialogVisible (val) {
            if (!val) {
                this.userForm = {
                    name: '',
                    email: '',
                    mobile: '',
                    remark: ''
                }
            }
        }
    },
    methods: {
        gettabledata () {
            opinionContactsList().then(data => {
                this.tableData = data.data
            })
        },
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.dtitle === '编辑联系人') {
                        opinionContactsEdit(this.userForm).then(() => {
                            this.gettabledata()
                            this.dialogVisible = false
                        });
                    } else {
                        opinionContactsAdd(this.userForm).then(() => {
                            this.gettabledata()
                            this.dialogVisible = false
                        });
                    }
                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.form.resetFields();
        },
        bianji (a) {
            this.dtitle = '编辑联系人'
            this.userForm = a
            this.dialogVisible=true
        },
        shanchu (a) {
            opinionContactsDel(a.id).then(()=>{
                this.gettabledata()
            })
        },
        handleSizeChange () {},
        handleCurrentChange () {}
    }
}
</script>